<template>
      <!--顶部导航栏 start-->
  <ExamMenu />
  <!--顶部导航栏 end-->
    <div class="faq-container">
      <!-- 主标题 -->
      <h1 class="main-title">
        <el-icon><QuestionFilled /></el-icon>
        常见问题解答
      </h1>
  
      <!-- 搜索框 -->
      <div class="search-box">
        <el-input
          v-model="searchText"
          placeholder="输入关键词查找问题"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
  
      <!-- 分类导航 -->
      <div class="nav-wrapper">
        <el-scrollbar class="category-nav">
          <div class="category-list">
            <div
              v-for="cat in categories"
              :key="cat.id"
              class="category-item"
              :class="{ active: activeCategory === cat.id }"
              @click="changeCategory(cat.id)"
            >
              <component :is="cat.icon" class="category-icon" />
              <span>{{ cat.name }}</span>
              <el-badge :value="categoryCount[cat.id]" class="category-badge" />
            </div>
          </div>
        </el-scrollbar>
      </div>
  
      <!-- 问题列表 -->
      <div class="question-list">
        <el-card
          v-for="item in filteredQuestions"
          :key="item.id"
          class="question-card"
        >
          <div class="card-header" @click="toggleQuestion(item.id)">
            <div class="question-title">
              <el-icon :class="item.icon" />
              <span v-html="highlightText(item.question)"></span>
            </div>
            <el-icon class="arrow-icon">
              <CaretTop v-if="item.expanded" />
              <CaretBottom v-else />
            </el-icon>
          </div>
          <transition name="expand">
            <div v-show="item.expanded" class="answer-content">
              <div v-html="highlightText(item.answer)"></div>
              <el-alert
                v-if="item.tip"
                :title="item.tip"
                type="warning"
                :closable="false"
                class="answer-tip"
              />
            </div>
          </transition>
        </el-card>
      </div>
    </div>
      <!--底部 start-->
  <ExamFooter />
  <!--底部 end-->
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue'
  import {
    QuestionFilled,
    Search,
    CaretTop,
    CaretBottom,
    User,
    Monitor,
    Ticket,
    Connection
  } from '@element-plus/icons-vue'
  import ExamFooter from '@/components/comm/ExamFooter.vue';
  import ExamMenu from '@/components/comm/ExamMenu.vue';
  // 分类数据
  const categories = ref([
    { id: 'all', name: '全部', icon: QuestionFilled },
    { id: 'account', name: '账户', icon: User },
    { id: 'tech', name: '技术', icon: Monitor },
    { id: 'exam', name: '考试', icon: Ticket },
    { id: 'network', name: '网络', icon: Connection }
  ])
  
  // 问题数据
  const questions = ref([
    {
      id: 1,
      question: '如何注册账号？',
      answer: '访问官网注册页面填写信息',
      category: 'account',
      icon: User,
      tip: '需验证邮箱'
    },
    {
      id: 2,
      question: '考试断线怎么办？',
      answer: '1. 检查网络<br>2. 联系客服',
      category: 'tech',
      icon: Monitor,
      tip: '5分钟内重连'
    }
  ])
  
  // 响应式状态
  const searchText = ref('')
  const activeCategory = ref('all')
  
  // 计算分类数量
  const categoryCount = computed(() => {
    const counts = { all: questions.value.length }
    categories.value.forEach(cat => {
      if (cat.id !== 'all') {
        counts[cat.id] = questions.value.filter(q => q.category === cat.id).length
      }
    })
    return counts
  })
  
  // 高亮文本
  const highlightText = (text) => {
    if (!searchText.value) return text
    const regex = new RegExp(`(${searchText.value})`, 'gi')
    return text.replace(regex, '<span class="highlight">$1</span>')
  }
  
  // 过滤问题
  const filteredQuestions = computed(() => {
    return questions.value.filter(item => {
      const matchCategory = activeCategory.value === 'all' || item.category === activeCategory.value
      const matchSearch = item.question.includes(searchText.value) || item.answer.includes(searchText.value)
      return matchCategory && matchSearch
    })
  })
  
  // 切换问题展开状态
  const toggleQuestion = (id) => {
    const question = questions.value.find(q => q.id === id)
    if (question) question.expanded = !question.expanded
  }
  
  // 切换分类
  const changeCategory = (catId) => {
    activeCategory.value = catId
  }
  </script>
  
  <style lang="scss" scoped>
    // 主题色定义
    @use '@/assets/scss/variables' as *;
  
  .faq-container {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
  
    .main-title {
      text-align: center;
      color: $primary-color;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 2em;
    }
  
    .search-box {
      margin-bottom: 20px;
      
      :deep(.el-input__inner) {
        border-radius: 20px;
        padding-left: 40px;
        border-color: $primary-color;
      }
    }
  
    .category-nav {
      margin-bottom: 30px;
  
      .category-list {
        display: flex;
        gap: 10px;
        padding: 10px 0;
        justify-content: space-around;
  
        .category-item {
          padding: 10px 20px;
          border-radius: 20px;
          background: white;
          display: flex;
          align-items: center;
          gap: 8px;
          cursor: pointer;
          transition: all 0.3s;
          border: 1px solid #eee;
          flex-shrink: 0;
          width: 100px;
  
          &.active {
            background: $primary-color;
            color: white;
            
            .category-icon {
              color: white;
            }
          }
  
          .category-icon {
            color: $primary-color;
          }
  
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 10px rgba($primary-color, 0.1);
          }
        }
      }
    }
  
    .question-card {
      margin-bottom: 15px;
      transition: all 0.3s;
  
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        cursor: pointer;
  
        .question-title {
          display: flex;
          align-items: center;
          gap: 10px;
        }
      }
  
      .answer-content {
        padding: 0 15px 15px;
        color: #666;
        line-height: 1.6;
      }
    }
  }
  
  .expand-enter-active, .expand-leave-active {
    transition: all 0.3s;
    overflow: hidden;
  }
  
  .expand-enter-from, .expand-leave-to {
    opacity: 0;
    max-height: 0;
  }
  
  @media (max-width: 768px) {
    .faq-container {
      padding: 20px;
  
      .category-item {
        padding: 8px 15px !important;
        font-size: 0.9em;
      }
  
      .question-card {
        .card-header {
          padding: 10px;
        }
      }
    }
  }
  </style>